<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--

轮播图:
     html   结构划分    div
     css    页面美化    分页器    左右切换按钮
     javascript     定时器  单击事件
  A.html   轮播图    html  css  js      a.css  存在多个节点对象的css样式  a.js
  B.html   轮播图    html  css  js     copy  存在代码冗余   代码复用率低

 组件化开发      轮播组件   html  css  js     lb.vue   list.vue      login.html     login.vue
     组件:  将能够实现某种特定需求的 html css js 静态资源等组合在一起 则形成一个组件
     通过组件的形式完成web项目开发 ,可以大大的提升代码的复用效率

如何定义组件?
   分类:
      组件的形式:
           单文件组件:     将实现特定需求的代码写在一个.vue的文件中   login.vue
           非单文件组件:   在一个html文件中可以定义多个组件
      组件作用域:
         局部组件  :  注册在其他组件身上的组件则是局部组件,局部组件只能在注册的位置使用
         全局组件  : 将组件注册在Vue身上,则该组件是全局组件,后续通过Vue构造函数创建的vue实例以及其子组件可直接使用该组件

 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等,
 仅有的例外是像 el 这样根实例特有的选项

 组件命名方式:

      当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，
      我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。
      这会帮助你避免和当前以及未来的 HTML 元素相冲突。

定义组件名的方式有两种：

     1.使用 kebab-case      my-component-name
        当使用 kebab-case (短横线分隔命名) 定义一个组件时，
        你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>
     2.使用 PascalCase   大驼峰  MyComponentName
      当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
      也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
      注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

-->
<div id="app">

    <!--通过组件标签使用组件  因为你每用一次组件，就会有一个它的新实例被创建-->
    <student-info></student-info>
    <!--    局部组件-->
    <hr>
    <teacher-info></teacher-info>
<!--    <TeacherInfo></TeacherInfo>-->
</div>

<script>

    const studentInfo = {
        template: `
                <div>
                    <p>学生姓名:jack</p>
                    <p>学生年龄:20</p>
                    <p>学生性别:男</p>
                </div>
        `
    }

    const teacherInfo = {
        template: `
          <div>
              <StudentInfo></StudentInfo>
              <hr>
              <student-info></student-info>
          </div>
        `,
        components:{
            'StudentInfo': studentInfo
        }
    }


    // 全局组件的注册   参数1: 组件名字    参数2: 组件对象
    // Vue.component('student-info', studentInfo )


    //  通过vue的构造函数创建的实例对象   根组件
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        //   注册组件   为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别
        components: {
            // 组件名: 组件对象
            // 'teacher-info': teacherInfo,  //  局部组件
            'TeacherInfo':teacherInfo,
            'student-info': studentInfo   //  局部组件
        }
    })


</script>
</body>
</html>